import React from 'react';

class AddTodo extends React.Component{
    state = {text:''}
    handleSubmit = (event)=>{
        event.preventDefault();
        this.props.onAdd(this.state.text);
        this.setState({text:''});
    }
    handleChange = (event)=>{
        this.setState({text:event.target.value});
    }
    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <input value={this.state.text} onChange={this.handleChange}/>
                <input type="submit"/>
            </form>
        )
    }
}
class TodoList extends React.Component{
    render(){
        const {todos,onToggle,onDelete}  = this.props;
        return (
            <ul>
                {
                    todos.map((todo)=>(
                        <TodoItem 
                            key={todo.id} 
                            todo={todo} 
                            onToggle={()=>onToggle(todo.id)} 
                            onDelete={()=>onDelete(todo.id)}/>
                    ))
                }
            </ul>
        )
    }
}
class TodoItem extends React.Component{
    render(){
        const {todo,onToggle,onDelete} = this.props;
        return (
            <li>
                <input type="checkbox" checked={todo.completed} onChange={onToggle}/>
                <span style={{textDecoration:todo.completed?'line-through':'none'}}>{todo.text}</span>
                <button onClick={onDelete}>x</button>
            </li>
        )
    }
}
class FilterTodo extends React.Component{
    handleChange = (event)=>{
        this.props.onFilterChange(event.target.value);
    }
    render(){
        const {filter} = this.props;
        return (
            <>
              <input type="radio" value="all" name="filter" checked={filter==='all'} onChange={this.handleChange} id='all'/>
              <label htmlFor='all'>全部</label>
              <input type="radio" value="completed" name="filter" checked={filter==='completed'} onChange={this.handleChange} id='completed'/>
              <label htmlFor='completed'>已完成</label>
              <input type="radio" value="uncompleted" name="filter" checked={filter==='uncompleted'} onChange={this.handleChange} id='uncompleted'/>
              <label htmlFor='uncompleted'>未完成</label>
            </>
        )
    }
}


class TodoApp extends React.Component {
    state = { todos: [], filter: 'all' }
    handleAdd = (text) => {
        let newTodo = {id:Date.now()+''+Math.random(), text, completed: false }
        this.setState({
            todos: [...this.state.todos, newTodo]
        });
    }
    handleToggle = (id) => {
        const {todos} = this.state;
        const newTodos = todos.map(todo=>{
            if(todo.id === id){
                todo.completed = !todo.completed;
            }
            return todo;
        });
        this.setState({
            todos: newTodos
        });
    }
    handleDeleteAll = ()=>{
        this.setState({
            todos: []
        });
    }
    handleDelete = (id)=>{
        const {todos} = this.state;
        const newTodos = todos.filter(todo=>todo.id !== id);
        this.setState({
            todos: newTodos
        });
    }
    handleFilterChange = (filter) => {
        this.setState({ filter });
    }
    getFilterTodos = () => {
        let { todos, filter } = this.state;
        switch (filter) {
            case 'completed':
                return todos.filter(todo => todo.completed);
            case 'uncompleted':
                return todos.filter(todo => !todo.completed);
            case 'all':
                return todos;
        }
    }
    render(){
        return (
            <>
             <AddTodo onAdd={this.handleAdd}/>
             <FilterTodo filter={this.state.filter} onFilterChange={this.handleFilterChange}/>
             <TodoList todos={this.getFilterTodos()} onToggle={this.handleToggle} onDelete ={this.handleDelete}/>
             <button onClick={this.handleDeleteAll}>全部清空</button>
            </>
        )
    }
}
export default TodoApp;